<template>
  <div class="article-preview">
    <!-- 弹出框 -->
    <span class="artPreBtn" @click="artDetails">预览</span>
    <el-dialog title="文章预览" :visible.sync="artPreDialogVisable" width="60%">
      <!-- 文章标题 -->
      <div class="art-title">
        <h2>{{artDetailList.title}}</h2>
        <span>{{artDetailList.createTime | formdate}}</span>
        <span>{{scoperow.username}}</span>
        <i class="el-icon-view"></i>
        <span>{{artDetailList.visits}}</span>
      </div>
      <!-- 文章内容 -->
      <div class="art-content" v-html="artDetailList.articleBody"></div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/articles";
import { parseTime } from "@/utils/index.js";

export default {
  name: "ArticlePreview",
  props: ['scoperow'],
  data() {
    return {
      artPreDialogVisable: false, // 控制文章预览弹出框
      artDetailList: {}, // 文章详情
    };
  },
  methods: {
    // *获取文章详情
    async artDetails() {
      this.artPreDialogVisable = true;
      const { data } = await detail(this.scoperow.id);
      this.artDetailList = data;
      // console.log(data);
    },
  },
  filters: {
    formdate(time) {
      return parseTime(time);
    },
  },
};
</script>

<style scoped lang='less'>
.article-preview {
  .artPreBtn {
    cursor: pointer;
  }
  .art-title {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    span,
    i {
      margin-left: 10px;
      margin-top: 10px;
    }
  }
  .art-content {
    background: #f5f5f5;
    padding: 10px;
  }
}
</style>
